<template>
  <div>
    <div class="meeting-card-list">
      <div
        class="meeting-card-list-item"
        v-for="meeting in meetingListData.conferenceBaseList"
        :key="meeting.cid"
      >
        <meeting-card
          :type="type"
          :meeting="meeting"
          v-on="$listeners"
        />
      </div>
    </div>
    <pagination
      :total="meetingListData.conferenceNum"
      :pageSize="9"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import MeetingCard from '../MeetingCard'
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    meetingListData: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    MeetingCard
  },
  data () {
    return {
      readyDialogVisible: false,
      currentPage: 1
    }
  },
  methods: {
    // 页码更新
    handlePageChange (currentPage) {
      console.log('handlePageChange', this.type, currentPage)
      this.$emit('page-change', this.type, currentPage)
    }
  }
}
</script>

<style lang="scss" scoped>
.meeting-card-list {
  margin-bottom: 20px;
  .meeting-card-list-item {
    display: inline-block;
    margin-left: calc((100% - 3 * 388px) / 2);
    margin-bottom: 20px;
    &:nth-child(3n + 1) {
      margin-left: 0px;
    }
  }
}
</style>
